<template>
  <div class="pages_border_Div" v-border-draggable style="position: fixed;z-index: 999"
    :style="{ width: w, top: y, left: x }">
    <div class="divBorder">
      <div class="headsBorders">
        <el-image :src="titleBj" style="width: 4px;height: 20px;" />
        <div class="title" style="font-weight: bold;">{{ title }}</div>
        <div class="closeBtn">
          <i class="el-icon-upload2" v-if="!foldUp && foldUpBtn" title="收起" @click="foldUp = true" />
          <i class="el-icon-download" v-if="foldUp && foldUpBtn" title="展开" @click="foldUp = false" />
          <i class="el-icon-minus" v-if="minimize" title="最小化" @click="$emit('minimize')" />
          <i class="el-icon-close" v-if="close" title="关闭" @click="$emit('close')" />
        </div>
      </div>
      <div class="content" style="width: 100%;" :style="{ height: h }" v-if="!foldUp">
        <slot />
      </div>
    </div>

  </div>
</template>
<script>
import borderDraggable from '@/directive/border-draggable'
import { set } from 'nprogress';

export default {
  // components: {border},
  directives: {
    borderDraggable
  },
  props: {
    title: String,
    w: String,
    h: String,
    x: String,
    y: String,
    minimize: {
      type: Boolean,
      default: false
    },
    foldUpBtn: {
      type: Boolean,
      default: false
    },
    close: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      foldUp: false,
      titleBj: require("./title.svg"),
    }
  },
  methods: {
    setfoldUp(v) {
      this.foldUp = v
      console.log(v);

    }
  }
}
</script>
<style scoped lang="scss">
.pages_border_Div {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);


  .divBorder {
    width: 100%;
    position: relative;

    .closeBtn {
      position: absolute;
      top: 10px;
      right: 10px;

      i {
        background-color: #F5F4F3;
        border-radius: 4px;
        padding: 3px;
        cursor: pointer;
        margin-left: 5px;
      }
    }

    .headsBorders {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #F2F2F2;
      padding: 10px;

      .title {
        margin-left: 10px;
      }


    }
  }


}
</style>
